<template>
    <div class="footer">
        <router-link
            tag="div"
            to="/"
            class="footer-item"
        >
            <img
                class="footer-img"
                :src="nowPage == 0 ? require('@/assets/images/home/home.png'):require('@/assets/images/home/home-off.png')"
            />
            <div
                class="footer-name"
                :class="nowPage == 0 ? 'active':''"
            >百领好货</div>
        </router-link>
        <router-link
            tag="div"
            to="/messageCenter"
            class="footer-item"
        >
            <img
                class="footer-img"
                :src="nowPage == 1 ? require('@/assets/images/home/message.png'):require('@/assets/images/home/message-off.png')"
            />
            <div
                class="footer-name"
                :class="nowPage == 1 ? 'active':''"
            >消息中心</div>
        </router-link>
        <router-link
            tag="div"
            to="/socialSystem"
            class="footer-item"
        >
            <img
                class="footer-img"
                :src="nowPage == 2 ? require('@/assets/images/home/help.png'):require('@/assets/images/home/help-off.png')"
            />
            <div
                class="footer-name"
                :class="nowPage == 2 ? 'active':''"
            >百领社区</div>
        </router-link>
        <router-link
            tag="div"
            to="/Cart"
            class="footer-item"
        >
            <img
                class="footer-img"
                :src="nowPage == 3 ? require('@/assets/images/home/cart.png'):require('@/assets/images/home/cart-off.png')"
            />
            <div
                class="footer-name"
                :class="nowPage == 3 ? 'active':''"
            >购物车</div>
        </router-link>
        <router-link
            tag="div"
            to="/userCenter"
            class="footer-item"
        >
            <img
                class="footer-img"
                :src="nowPage == 4? require('@/assets/images/home/user.png'):require('@/assets/images/home/user-off.png')"
            />
            <div
                class="footer-name"
                :class="nowPage == 4 ? 'active':''"
            >我的</div>
        </router-link>
    </div>
</template>

<script>
export default {
    name: 'CommonFooter',
    props: ['nowPage']
}
</script>

<style lang="stylus" scoped>
.footer
    position absolute
    bottom 0
    left 0
    right 0
    background #fff
    height 1.17rem
    display flex
    align-items center
    z-index 2
    box-sizing border-box
    .footer-item
        position relative
        flex 1
        text-align center
        .footer-img
            height 0.6rem
        .cart-num
            position absolute
            right 0.5rem
            top -0.1rem
            width 0.45rem
            height 0.45rem
            line-height 0.45rem
            text-align center
            background #d7463c
            border-radius 100% 100%
            font-size 0.32rem
            color #fff
        .footer-name
            font-size 0.25rem
            color #131313
            margin-top 0.1rem
        .active
            color #4b866e
</style>


